<template>
  <view class="h-24 bg-white flex items-center justify-center">
    <image class="w-14 h-14 rounded-full" :src="accountInfo.merchant_logo" @click="uploadLogo" v-if="accountInfo.merchant_logo"></image>
    <view class="p-2" @click="uploadLogo" v-else>
      <image class="w-10 h-10" src="@/static/image/photo.png"></image>
    </view>

  </view>
  <view class="mt-2 bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户名称</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_name" placeholder-class="plcg" placeholder="请输入子账户商户名称">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户品牌</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_brand" placeholder-class="plcg" placeholder="请输入商户品牌">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">手机号码</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.phone" placeholder-class="plcg" placeholder="请输入手机号码 (添加后不可修改)">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">登录密码</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.password" placeholder-class="plcg" placeholder="请输入密码 (添加后本人可修改)">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex justify-between items-center">
      <view class="text-sm py-2">分成比例 <text class="text-xs">(按月结算)</text></view>
      <image class="w-6 h-6" @click="addInto" src="@/static/image/addInto.png"></image>
    </view>


    <view class="border-solid  border  border-gray-300 rounded" style="border-bottom: 0" v-if="true">
      <!--头部-->
      <view class="flex h-10 border-solid border-0 border-b border-gray-300">
        <view class="flex-1 text-slate-600 text-sm text-center">
          <view>营收范围</view>
          <view class="text-xs">(n&lt;X&lt;=m )</view>
        </view>
        <view class="w-20 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">
          分成
        </view>
        <view class="w-10 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">

        </view>
      </view>

      <view class="flex border-solid border-0 border-b border-gray-300" v-for="(item, index) in intoArray">
        <view class="flex-1 px-4 py-2 gap-1 flex justify-between items-center text-xs text-center">
        <view>
          <input type="number" class="w-18 h-8 text-xs border-solid border border-gray-300 rounded" v-model="item.start">
        </view>
        ~
        <view>
          <input type="number" class="w-18 h-8 text-xs border-solid border border-gray-300 rounded" v-model="item.end">
        </view>
      </view>
        <view class="w-20 text-xs box-border px-2 py-2 border-solid border-0 border-l border-gray-300">
          <view class="m-auto border-solid px-1 box-border flex items-center border border-gray-300 w-full h-full rounded">
            <input type="number" class="px-1 text-xs h-full" placeholder-class="plcg" v-model="item.rate" placeholder="">%
          </view>
        </view>

        <view class="w-10 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">
          <!--<text v-if="index" @click="deleteInfo(index)">删除</text>-->
          <image v-if="index" @click="deleteInfo(index)" class="w-6 h-6" src="@/static/image/delete.png"></image>
        </view>
      </view>

    </view>

  </view>

  <view class="bg-white px-4">
    <view class="pt-2 text-sm">商户经验信息:</view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">经营产所</view>
      <picker class="flex-1 h-full flex items-center justify-end" v-model="accountInfo.type" mode="selector" :range="operateRange" range-key="text" @change="selectOperator">
        <view>{{ operateRange[operateValue].text }}</view>
      </picker>
      <!--<input class="flex-1 h-full ml-auto text-right" type="text" placeholder-class="plcg" placeholder="请输入8-15位组合密码">-->
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源位</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_w" placeholder-class="plcg" placeholder="请输入商户资源位">
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户地区</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_address" placeholder-class="plcg" placeholder="请输入经营地区">
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源名称</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_name" placeholder-class="plcg" placeholder="请输入商户资源名称">
    </view>
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源流量</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_flow" placeholder-class="plcg" placeholder="请输入资源流量">
    </view>
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">备注</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.remark" placeholder-class="plcg" placeholder="请输入备注信息">
    </view>

    <view class="py-4">
      <!--flex items-center justify-center-->
      <view class="w-4/5 h-8 m-auto flex items-center justify-center text-white bg-indigo-500 rounded-2xl text-sm" @click="increaseAccount">确认添加</view>
    </view>

  </view>



</template>

<script setup lang="ts">
  import { ref, reactive } from "vue";
  import { uiwu } from "@/api/interface/interface";
  import { fileUpload } from '@/api/public/index'
  import { throttle } from '@/api/common'
  import { addSubAccountApi } from '@/api/increaseSub/index'
  import type { addSubAccountItf } from '@/api/increaseSub/type'
  import { onLoad } from '@dcloudio/uni-app'


  const accountInfo = ref<addSubAccountItf>({
    merchant_name: '',
    merchant_logo: '',
    merchant_brand: '',
    phone: '',
    password: '',
    merchant_address: '', // 商户地区
    type: '10',
    resources_w: '',
    resources_name: '',
    resources_flow: '',
    remark: '',
    rate: []
  })

  onLoad(() => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 10
    })
  })

  /** 上传logo **/
  const uploadLogo = () => {
    uni.chooseImage({
      success: async (chooseImageRes) => {
        uni.showLoading({ title: '正在上传...' })
        const data = await fileUpload({
          name: 'file',
          filePath: chooseImageRes.tempFilePaths[0],
        })
        if(data.status != 200) {
          uiwu.toast(data.msg)
        }else {
          accountInfo.value.merchant_logo = data.data.url
        }
        uni.hideLoading()
      }
    })
  }

  /** 分成比例数组 **/
  const intoArray = ref([{
    start: '',
    end: '',
    rate: ''
  }])

  /** 添加分成 **/
  const areAllPropertiesNonEmpty = (arr) => {
    function isEmpty(value) { return value === '' }

    for (let i = 0; i < arr.length; i++) {
      const obj = arr[i];
      // 遍历对象的每个属性
      for (const key in obj) {
        if(isEmpty( obj[key]) ) {
          // 如果找到任何空值，立即返回false
          return false;
        }
      }
    }
    // 如果没有找到空值，则返回true
    return true;
  }

  const verifyRate = (arr: any[] ) => {
    for(let i = 0; i<arr.length; i++) {
      if(i) {
        if(Number(arr[i].end) <= Number(arr[i].start) || Number(arr[i].start) <= Number(arr[i-1].end)) {
          // console.log('输入金额有误')
          return false
        }
      }else {
        if(Number(arr[i].end) <= Number(arr[i].start)) {
          // console.log('结束金额要大于开始金额')
          return false
        }
      }



    }
    return true

  }

  /** 新增分成比例 **/
  const addInto = () => {
    const isHollow = areAllPropertiesNonEmpty(intoArray.value)
    if(!isHollow) return uiwu.toast('请先输入完整')
    intoArray.value.push({ start: '', end: '', rate: '' })
  }

  /** 删除分成比例-单行 **/
  const deleteInfo = (index) => {
    // console.log('index===', index)
    intoArray.value.splice(index, 1)
  }

  const operateValue = ref(0)
  const operateRange = reactive([
    { value: 10, text: '其他/未知' },
    { value: 20, text: '线下场所(非电玩)' },
    { value: 30, text: 'app/网站' },
    { value: 40, text: '公众号' },
    { value: 50, text: '个人玩家' },
    { value: 60, text: '网红主播' },
    { value: 70, text: '线下电玩城' },
  ])
  const selectOperator = (opValue) => {
    operateValue.value = opValue.detail.value
    accountInfo.value.type = String(operateRange[opValue.detail.value].value)
  }

  /** 子账号-添加btn **/
  const increaseAccount = throttle( async () => {
    /** 先对分成比例校验 **/
    const isHollow = areAllPropertiesNonEmpty(intoArray.value)
    if(!isHollow) return uiwu.toast('分成比例请输入完整')
    const norms = verifyRate(intoArray.value)
    if(!norms) return uiwu.toast('分成比例输入金额有误')

    accountInfo.value.rate = intoArray.value
    const res = await addSubAccountApi(accountInfo.value)
    if( res.status == 200 ) {
      uiwu.toast('添加成功')
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/subAccount/index',
          success() {
            uni.$emit('updateSubList', { status: 1 })
          }
        })
      }, 3000)
    }

  }, 3000)

</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
.plcg {
  font-size: 24rpx;
}
</style>
